<template>
  <div class="edit-container">
    <a-card class="card">
      <a-table :columns="columns" :data-source="dataSource" bordered :pagination="false" size="small">
        <template #bodyCell="{ column, text, record }">
          <template v-if="['name', 'address', 'email'].includes(column.dataIndex)">
            <div>
              <a-input v-if="editKeys.includes(record.key)" v-model:value="record[column.dataIndex]" placeholder="请输入"
                :allowClear="true" style="margin: -5px 0" />
              <template v-else>
                {{ text || '--' }}
              </template>
            </div>
          </template>
          <template v-if="column.dataIndex === 'state'">
            <a-select v-model:value="record.state" v-if="editKeys.includes(record.key)">
              <a-select-option v-for="(item, index) in options" :key="index" :value="item.value">
                {{ item.title }}
              </a-select-option>
            </a-select>
            <template v-else>
              {{ options.find(item => item.value === text)?.title || '--' }}
            </template>
          </template>
          <template v-else-if="column.dataIndex === 'operation'">
            <a-button class="margin10" type="primary" size="small" v-if="editKeys.includes(record.key)"
              @click="onSave(record.key)">
              <template #icon>
                <check-outlined />
              </template>
              保存
            </a-button>
            <a-button class="margin10" type="primary" size="small" @click="onEdit(record.key)"
              v-if="!editKeys.includes(record.key)">
              <template #icon>
                <form-outlined />
              </template>
              编辑
            </a-button>
            <a-popconfirm title="确定删除？" ok-text="是的" cancel-text="取消" @confirm="onDelete(record.key)">
              <a-button class="margin10" type="primary" danger size="small">
                <template #icon>
                  <delete-outlined />
                </template>
                删除
              </a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
      <a-button block @click="onAddData">
        <plus-circle-outlined />
        添加一行数据
      </a-button>
      <div class="action-btn">
        <a-button class="margin10" @click="resetData">
          重置
        </a-button>
        <a-button class="margin10" type="primary" @click="onSubmit">
          提交
        </a-button>
      </div>
    </a-card>
  </div>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { FormOutlined, DeleteOutlined, CheckOutlined, PlusCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
interface DataItem {
  key: number;
  name: string;
  state: string;
  address: string;
  email: string
}
const options = [
  {
    value: 'in',
    title: '就业'
  },
  {
    value: 'out',
    title: '未就业'
  }
]
export default defineComponent({
  setup() {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        width: '20%',
      },
      {
        title: '就业状态',
        dataIndex: 'state',
        width: '15%',
      },
      {
        title: '地址',
        dataIndex: 'address',
        width: '20%',
      },
      {
        title: '邮箱',
        dataIndex: 'email',
        width: '25%',
      },
      {
        title: '操作',
        dataIndex: 'operation',
      },
    ];
    const dataSource: DataItem[] = reactive([]);
    const editKeys: number[] = reactive([]);
    const onEdit = (key: number) => {
      editKeys.push(key);
    }
    const onDelete = (key: number) => {
      const index = dataSource.findIndex(item => item.key === key);
      if (index >= 0) {
        dataSource.splice(index, 1);
      }
    }
    const onSave = (key: number) => {
      const index = editKeys.findIndex(item => item === key);
      if (index >= 0) {
        editKeys.splice(index, 1);
      }
    }
    const resetData = () => {
      dataSource.length = 0;
      for (let i = 0; i < 5; i++) {
        dataSource.push({
          key: i,
          name: `冬瓜 ${i}`,
          state: Math.ceil(Math.random() * 10) % 2 === 0 ? 'out' : 'in',
          address: `广州 ${i} 号`,
          email: `1234567890${i}.qq.com`
        });
      }
      editKeys.push(...[1, 3, 4]);
    }
    const onSubmit = () => {
      message.success('提交数据成功');
      resetData();
    }
    const onAddData = () => {
      editKeys.push(dataSource.length);
      dataSource.push({
        key: dataSource.length,
        name: '',
        state: Math.ceil(Math.random() * 10) % 2 === 0 ? 'out' : 'in',
        address: '',
        email: ''
      })
    }
    onMounted(() => {
      resetData();
    })
    return {
      dataSource,
      columns: ref(columns),
      editKeys,
      options,

      onEdit,
      onDelete,
      onSave,
      resetData,
      onSubmit,
      onAddData,
    };
  },
  components: {
    FormOutlined,
    DeleteOutlined,
    CheckOutlined,
    PlusCircleOutlined,
  }
});
</script>
<style lang='less' rel='stylesheet/less' scoped>
.edit-container {
  margin: 20px;
  height: calc(100% - 80px);

  .card {
    height: 100%;
    min-width: 1000px;
    overflow: scroll;
    box-shadow: 0px 0px 12px rgb(0 0 0 / 12%);
    border-radius: 4px;
    margin: 8px 5px;
  }

  .margin10 {
    margin-right: 10px;
  }

  .action-btn {
    margin: 10px 0;
  }
}
</style>